<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="margin-bottom: 10px"
    >
      <el-col
        :lg="6"
        style="display: flex; align-items: center"
        >项目简称：
        <el-select
          style="flex: 1"
          v-model="projectId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectShortName"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :lg="6"
        style="display: flex; align-items: center"
        >计划状态：<el-select
          style="flex: 1"
          v-model="status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :lg="6"
        style="display: flex; align-items: center"
        >分部名称：
        <el-select
          style="flex: 1"
          v-model="branchId"
        >
          <el-option
            v-for="item in davisOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col
        :lg="6"
        style="display: flex; align-items: center"
      >
        日期：<el-date-picker
          style="flex: 1"
          v-model="planCycle"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </el-date-picker
      ></el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :lg="12">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addHandler"
        >
          新增</el-button
        >
      </el-col>
      <el-col
        :lg="12"
        style="text-align: right"
      >
        <el-button
          type="primary"
          @click="searchHandler"
          >查询</el-button
        ><el-button
          plain
          @click="restHandler"
          >重置</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="55"
          align="center"
        />
        <el-table-column
          prop="projectShortName"
          label="关联计划"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.planType == 0">月计划</span>
            <span v-else-if="scope.row.planType == 1">编辑计划</span>
            <span v-else>周计划</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectShortName"
          label="项目简称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="constructName"
          label="工程名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="deptConstructName"
          label="单位工程名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="branchName"
          label="分部名称"
          align="center"
          width="120"
        />
        <el-table-column
          label="计划周期"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.planCycleStart }}</p>
            <p style="font-size: 10px">至</p>
            <p>{{ scope.row.planCycleEnd }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="productItemVoList"
          label="报验项目"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <p
              style="color: rgb(255, 222, 73)"
              :key="index"
              v-for="(item, index) in scope.row.productItemVoList"
            >
              {{ item.itemName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="lineType"
          label="线别"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            {{
              lineTypeOptions.filter((el) => el.value == scope.row.lineType)[0]
                .name
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="acceptSite"
          label="验收区间"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <p>
              DK{{ scope.row.intervalStartKm }}+{{ scope.row.intervalStartM }}
            </p>
            <p style="font-size: 10px">至</p>
            <p>DK{{ scope.row.intervalEndKm }}+{{ scope.row.intervalEndM }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="mileage"
          label="验收里程/米"
          align="center"
          width="100"
        />
        <el-table-column
          label="自检负责人"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <p
              :key="index"
              v-for="(item, index) in scope.row.productItemVoList"
            >
              {{ item.selfCheckName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          label="专检负责人"
          align="center"
          prop="specialCheckName"
          width="100"
        />
        <el-table-column
          label="技术主管"
          align="center"
          prop="technicalManagerName"
          width="100"
        />
        <el-table-column
          label="基地负责人"
          align="center"
          prop="baseLeaderName"
          width="100"
        />
        <el-table-column
          align="center"
          label="相关文件"
          prop="reportPath"
          min-width="200"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.reportPath == null"
              style="color: rgb(199, 199, 199); font-size: 0.8rem"
            >
              暂无文件
            </div>
            <div
              v-else
              style="text-align: left"
            >
              <span
                @click="showFile(scope.row)"
                class="pHover"
                title="点击下载"
                v-if="scope.row.lineType == 0"
              >
                工序流程卡--{{ scope.row.branchName }}--ZYDK{{
                  scope.row.intervalStartKm
                }}+{{ scope.row.intervalStartM }}~ZYDK{{
                  scope.row.intervalEndKm
                }}+{{ scope.row.intervalEndM }}
              </span>
              <span
                @click="showFile(scope.row)"
                class="pHover"
                title="点击下载"
                v-else-if="scope.row.lineType == 1"
              >
                工序流程卡--{{ scope.row.branchName }}--ZDK{{
                  scope.row.intervalStartKm
                }}+{{ scope.row.intervalStartM }}~ZDK{{
                  scope.row.intervalEndKm
                }}+{{ scope.row.intervalEndM }}
              </span>
              <span
                @click="showFile(scope.row)"
                class="pHover"
                title="点击下载"
                v-else
              >
                工序流程卡--{{ scope.row.branchName }}--YDK{{
                  scope.row.intervalStartKm
                }}+{{ scope.row.intervalStartM }}~YDK{{
                  scope.row.intervalEndKm
                }}+{{ scope.row.intervalEndM }}.docx
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="附件列表"
          align="center"
          prop="annexList"
          min-width="200"
        >
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.annexList.length === 0 || scope.row.annexList === null
              "
              style="color: rgb(199, 199, 199)"
            >
              暂无相关文件
            </div>
            <div v-else>
              <p
                v-for="(item, index) in scope.row.annexList"
                :key="index"
              >
                {{ index + 1 + '.' + item.name }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="检查日期"
          align="center"
          prop="checkDate"
          width="160"
        />
        <el-table-column
          label="操作"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteProductCheckApi({ idList: [scope.row.id] })"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getProductCheckPage,
  deleteProductCheck,
} from '../../../http/inTellingSchedule/processAcceptList.js'
import {
  getManagementList,
  getBranchItemList,
  downloadFile,
} from '../../../http/commonApi.js'
import { getDataType } from '../../../http/dictionary.js'
export default {
  data() {
    return {
      isSearch: false,
      lintypeOptions: [],
      projectOptions: [],
      davisOptions: [],
      options: [
        {
          value: 0,
          label: '未通过',
        },
        {
          value: 1,
          label: '通过',
        },
      ],
      projectId: null,
      status: null,
      branchId: null,
      planCycle: '',
      date: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      itemOptions: [
        {
          id: 1,
          name: '施工测量',
        },
        {
          id: 2,
          name: '轨排拼装',
        },
        {
          id: 3,
          name: '基底处理',
        },
        {
          id: 4,
          name: '走行轨安装',
        },
        {
          id: 5,
          name: '钢筋绑扎',
        },
      ],
      lineTypeOptions: [
        {
          id: 1,
          name: '左线',
        },
        {
          id: 2,
          name: '右线',
        },
        {
          id: 3,
          name: '左右线',
        },
      ],
    }
  },

  mounted() {
    getDataType({ type: 'ht_line_type' }).then((res) => {
      if (res.code == 200) {
        this.lineTypeOptions = res.data
      }
    })

    this.getBranchItemListApi()
    this.getManagementListApi()
    this.getProductCheckPageApi()
  },

  methods: {
    // 查询
    searchHandler() {
      this.isSearch = true
      this.currentPage = 1
      this.pageSize = 10
      this.getProductCheckPageApi(
        1,
        10,
        this.status,
        this.projectId,
        this.branchId,
        this.planCycle
      )
    },
    // 重置
    restHandler() {
      this.isSearch = false
      this.projectId = null
      this.branchId = null
      this.planCycle = ''
      this.getProductCheckPageApi()
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      if (this.isSearch === true) {
        this.getProductCheckPageApi(
          1,
          v,
          this.status,
          this.projectId,
          this.branchId,
          this.planCycle
        )
      } else {
        this.getProductCheckPageApi(1, v)
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      if (this.isSearch === true) {
        this.getProductCheckPageApi(
          v,
          this.pageSize,
          this.status,
          this.projectId,
          this.branchId,
          this.planCycle
        )
      } else {
        this.getProductCheckPageApi(v, this.pageSize)
      }
    },
    //
    branchForMaterHandler(v) {
      console.log('v::: ', v)
    },
    // 新增
    addHandler() {
      this.$router.push('/addProcessAccept')
    },
    editHandler(row) {
      this.$router.push({ name: 'addProcessAccept', params: row })
    },

    // 保存
    saveHanlder() {
      if (this.editTitle === '新增') {
        this.renderData.push(this.editForm)
      } else {
        this.renderData.forEach((el) => {
          if (el.id === this.rowId) {
            el = this.editForm
          }
        })
      }
      this.editDialogStatus = false
    },
    // 文件下载
    showFile(v) {
      downloadFile({ path: v.reportPath }).then((res) => {
        let url = URL.createObjectURL(res)
        // 创建a 标签
        const a = document.createElement('a')
        const e = document.createEvent('MouseEvents') // 创建鼠标事件对象
        e.initEvent('click', false, false) // 初始化事件对象
        a.href = url // 设置下载地址
        if (v.lineType == 0) {
          a.download = `工序流程卡--${v.branchName}--ZYDK${v.intervalStartKm}+${v.intervalStartM}~ZYDK${v.intervalEndKm}+${v.intervalEndM}.docx` // 设置下载文件名
        } else if (v.lineType == 1) {
          a.download = `工序流程卡--${v.branchName}--ZDK${v.intervalStartKm}+${v.intervalStartM}~ZDK${v.intervalEndKm}+${v.intervalEndM}.docx` // 设置下载文件名
        } else {
          a.download = `工序流程卡--${v.branchName}--YDK${v.intervalStartKm}+${v.intervalStartM}~YDK${v.intervalEndKm}+${v.intervalEndM}.docx` // 设置下载文件名
        }
        a.dispatchEvent(e)
      })
    },
    /**
     * 接口
     */
    // 查询项目列表

    getManagementListApi() {
      getManagementList().then((res) => {
        if (res.code == 200) {
          this.projectOptions = res.data
        }
      })
    },
    // 分部分项列表
    getBranchItemListApi() {
      getBranchItemList().then((res) => {
        if (res.code == 200) {
          this.davisOptions = res.data
        }
      })
    },
    //  分页查询
    getProductCheckPageApi(
      pageNum = 1,
      pageSize = 10,
      status = null,
      projectId = null,
      branchId = null,
      planCycle = ''
    ) {
      let params = { pageNum, pageSize, status, projectId, branchId, planCycle }
      getProductCheckPage(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 删除
    deleteProductCheckApi(params) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteProductCheck(params).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.currentPage =
                this.total % this.pageSize == 1
                  ? this.currentPage - 1
                  : this.currentPage
              this.getProductCheckPageApi(
                this.currentPage,
                this.pageSize,
                this.projectId,
                this.branchId,
                this.planCycle
              )
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
.pHover {
  display: inline-block;
  cursor: pointer;
  color: #4ea1db;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.pHover:hover {
  color: #ca0c16;
  box-sizing: border-box;
  border-bottom: 1px solid #ca0c16;
}
</style>
